<!-- 举报投诉--新增-->
<template>
  <view class="address">
    <u-form :model="form" ref="uForm" :label-width="250">
      <view class="card-box">
        <u-form-item
          ref="complaintMethod"
          prop="complaintMethod"
          label="投诉方式"
          class="form-item-box"
          required
        >
          <u-radio-group v-model="form.complaintMethod">
            <u-radio
              v-for="(item, index) in complaintmethodsList"
              :key="index"
              :name="item.value"
            >
              {{ item.label }}
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item
          ref="complaintType"
          prop="complaintType"
          label="举报类型"
          class="form-item-box"
          required
        >
          <u-input
            input-align="right"
            type="select"
            v-model="form.complaintTypeLabel"
            @click="complaintTypeShow = true"
            placeholder="请选择举报类型"
          />
          <u-select
            v-model="complaintTypeShow"
            mode="single-column"
            :list="complaintTypeList"
            @confirm="complaintTypeConfirm"
          ></u-select>
        </u-form-item>
        <u-form-item
          ref="complaintContent"
          prop="complaintContent"
          label="举报投诉内容"
          class="form-item-box"
          required
        >
          <u-input
            input-align="right"
            v-model="form.complaintContent"
            placeholder="请输入举报投诉内容"
            type="textarea"
            maxlength="300"
          />
        </u-form-item>
        <u-form-item
          label="投诉图片"
          class="form-item-box"
          label-position="top"
        >
          <u-upload
            ref="uUpload"
            :action="actionUrl"
            :custom-btn="true"
            @on-success="success"
            :show-progress="form.complaintPic ? false : true"
            @on-error="testerror"
            @on-remove="remove"
            max-count="3"
            :width="160"
            :height="160"
            :form-data="{
              bucketName: 'logistics-control-platform',
              folderName: 'dispatchPic',
            }"
            :header="{ accessToken: accessToken }"
            class="uUpload-box"
            :upload-text="'投诉图片'"
          >
            <view
              slot="addBtn"
              class="slot-btn"
              hover-class="slot-btn__hover"
              hover-stay-time="150"
            >
              <u-icon name="plus"></u-icon>
              选择图片
            </view>
          </u-upload>
        </u-form-item>
        <u-form-item label="联系电话" class="form-item-box">
          <u-input
            input-align="right"
            v-model="form.complaintPhone"
            placeholder="请输入联系电话"
            type="number"
            maxlength="11"
          />
        </u-form-item>
      </view>
      <u-button class="submit-btn" type="primary" @click="handleSubmit">
        确定
      </u-button>
    </u-form>
  </view>
</template>

<script>
import httpEnum from './../../common/httpEnum.js'
export default {
  data() {
    return {
      actionUrl: httpEnum.baseUploadUrl + '/freight-business/file/upload',
      accessToken: uni.getStorageSync('userAccount'),
      complaintmethodsList: [
        {
          label: '实名投诉',
          value: '1',
        },
        {
          label: '匿名投诉',
          value: '2',
        },
      ],
      complaintTypeShow: false,
      complaintTypeList: [],
      form: {
        complaintMethod: '1',
        complaintTypeLabel: undefined,
        complaintType: undefined,
        complaintContent: undefined,
        complaintPic: [],
        complaintPhone: undefined,
      },
      rules: {
        complaintMethod: [
          {
            required: true,
            message: '请选择投诉方式',
            trigger: ['blur', 'change'],
          },
        ],
        complaintType: [
          {
            required: true,
            message: '请选择举报类型',
            trigger: ['blur', 'change'],
          },
        ],
        complaintContent: [
          {
            required: true,
            message: '请输入举报投诉内容',
            trigger: ['blur', 'change'],
          },
        ],
      },
    }
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules)
  },
  onLoad() {
    this.getDictData('complaint_type')
  },
  methods: {
    complaintTypeConfirm(val) {
      this.form.complaintTypeLabel = val[0].label
      this.form.complaintType = this.complaintTypeList.find(
        (item) => val[0].label == item.label
      ).value
      this.triggerSingleFieldValidate('complaintType')
    },
    testerror(res, index, lists, name) {
      this.$api.msg('上传失败')
    },
    success(data, index, lists, name) {
      this.form.complaintPic = []
      lists.forEach((item) => {
        this.form.complaintPic.push(item.response?.result.originUrl)
      })
    },
    remove(index, lists) {
      this.form.complaintPic = []
      lists.forEach((item) => {
        this.form.complaintPic.push(item.response?.result.originUrl)
      })
    },
    //触发校验
    triggerSingleFieldValidate(refName) {
      this.$refs[refName].onFieldChange()
    },
    handleSubmit() {
      this.$refs.uForm.validate(async (valid) => {
        if (valid) {
          const data = {
            ...this.form,
            addFrom: '1',
          }
          const { code, result, message } = await this.$u.post(
            '/freight-business/freightComplaint/complaintAdd',
            data
          )
          if (code === '0') {
            this.showModal = false
            this.$api.msg('新增成功!')
            setTimeout(() => {
              uni.navigateBack({
                delta: 1,
              })
            }, 100)
          } else {
            this.$api.msg(message)
          }
        } else {
          this.$api.msg('请输入相关参数')
        }
      })
    },
    // 查询字典
    async getDictData(type) {
      const { code, result, message } = await this.$u.get(
        `/freight-auth/dictValue/type/${type}`
      )
      // 举报类型：complaint_type_***
      if (code === '0') {
        if (type == 'complaint_type') {
          this.complaintTypeList = result.map((item) => {
            return {
              label: item.labelDefault,
              value: item.value,
            }
          })
        }
      } else {
        this.$api.msg(message)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.address {
  background-color: rgb(238, 238, 239);
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  padding: 16rpx 24rpx;
}
.card-box {
  background: white;
  margin-top: 24rpx;
  border-radius: 10rpx;
  padding: 24rpx 24rpx 0 36rpx;
}
/deep/.uUpload-box {
  display: flex;
  flex-direction: row;
  /deep/.u-list-item {
    background-image: url('./../../static/upload.png');
    background-size: 50% 50%;
    background-position: center;
    background-repeat: no-repeat;
  }
  /deep/.u-iconfont[data-v-6e20bb40]::before {
    display: none;
  }
  /deep/.u-add-tips[data-v-0d33af60] {
    margin-top: 150rpx;
  }
  .slot-btn {
    width: 160rpx;
    height: 160rpx;
    background: #ffffff;
    box-shadow: 0px 5rpx 20rpx 1px rgba(197, 202, 213, 0.25);
    border-radius: 4rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
  }
}
.submit-btn {
  position: fixed;
  bottom: 48rpx;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 690rpx;
  height: 80rpx;
}
</style>
